import styles from './index.module.scss'
import Button from '@c/button'
import { useVipDialog, useShowLogin } from '@/utils/hooks'
import { vodOpenVipExport, openPayModalReport } from '@/utils/report'
import { userInfo } from '@/store'
import { useRecoilValue } from 'recoil'
import { videoProps } from '../video/react-video/store'
import cm from 'classnames'
import { useRouter } from 'next/router'

const Index = props => {
  const videoInfo = useRecoilValue(videoProps)
  const user = useRecoilValue(userInfo)
  const showVipDialog = useVipDialog()
  const showLogin = useShowLogin()
  const toVip = () => {
    let label = videoInfo.keywords
    try {
      label = label.split(',')
    } catch (error) {
    } finally {
      label.length = 3
    }

    if (user?.email && user.token) {
      vodOpenVipExport({
        content_name: videoInfo.name,
        t_tag: label[0],
        c_tag: label[1],
        p_tag: label[2],
        login_type: '是',
        vod_vip_remind: '最优线路'
      })
      openPayModalReport({
        isLogin: 'true',
        user_type: user?.isVip ? '会员' : '非会员'
      })
      showVipDialog(1)
    } else {
      vodOpenVipExport({
        content_name: videoInfo.name,
        t_tag: label[0],
        c_tag: label[1],
        p_tag: label[2],
        login_type: '否',
        vod_vip_remind: '最优线路'
      })
      showLogin()
    }
  }
  const router = useRouter()
  const { query } = router
  const toThird = () => {
    router.replace(`/vod/play-thrid/${query.id}/${query.ep}`)
  }
  return (
    <div className={styles.click}>
      <p className={styles.getVipText}>该影视无普通线路，请开通VIP后观看最优线路</p>
      <Button className={styles.getVip} onClick={toVip}>
        VIP畅享最优播放体验{'>>'}
      </Button>
      <img src="/images/sport-vip.webp" alt="开通VIP" className={cm(styles.getVipImg, 'hideWhenPhone')} />
    </div>
  )
}

export default Index
